<template>
  <nut-swiper :init-page="1" :pagination-visible="true" pagination-color="#426543" auto-play="3000" class="swiper">
    <nut-swiper-item>
      <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
    </nut-swiper-item>
    <nut-swiper-item>
      <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg" alt="" />
    </nut-swiper-item>
    <nut-swiper-item>
      <img src="https://storage.360buyimg.com/jdc-article/welcomenutui.jpg" alt="" />
    </nut-swiper-item>
    <nut-swiper-item>
      <img src="https://storage.360buyimg.com/jdc-article/fristfabu.jpg" alt="" />
    </nut-swiper-item>
  </nut-swiper>
  <nut-signature
      @confirm="confirm"
      @clear="clear"
  ></nut-signature>
  <p class="demo-tips">Tips: 点击确认按钮,下方显示签名图片</p>
  <nut-popup
      :destroy-on-close="false"
      position="bottom"
      @close="clear"
      v-model:visible="isShowPopup"
      :style="{ height: '30%', width: '100%' }"
  >
    <div class="demo"></div>
  </nut-popup>
</template>
<script>
export default {
  data(){
    return{
      isShowPopup:false
    }
  },
  // vue2写法，vue3任然兼容
  methods:{
    confirm(canvas, data) {
      let img = document.createElement('img');
      img.src = data;
      document.querySelector('.demo').appendChild(img);
      this.isShowPopup = true
    },

    clear() {
      let img = document.querySelector('.demo img');
      if (img) {
        img.remove();
      }
    }
  }
}
</script>
<style lang="scss">
.swiper{
  max-width: 100%;
  img{
    max-width: 100%;
  }
  .nut-swiper-inner{
    height: auto !important;
  }
}
.demo{
  display: flex;
  justify-content: center;
  align-content: center;
}
</style>
